<template>
  <div class="new-order-page">
    <div class="order-content">
      <van-cell-group inset>
        <van-steps :active="active">
          <van-step>用户下单</van-step>
          <van-step>司机接单</van-step>
          <van-step>等待司机</van-step>
          <van-step>订单完成</van-step>
        </van-steps>
        <van-cell title="行程起点" :value="startLocation" />
        <van-cell title="行程终点" :value="endLocation" />
        <van-cell title="车辆类型">
          <template #right-icon>
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" :popup-props="{ placement: 'bottom' }" />
            </van-dropdown-menu>
          </template>
        </van-cell>
        <van-cell title="乘客人数" class="vehicle-type-container">
          <van-stepper v-model="value" integer min="1" max="4" />
        </van-cell>
        <van-cell title="距离" :value="`${distance} 公里`" />
        <van-cell title="价格" :value="`${fee} 元`" />
        <van-cell title="预计时间" :value="` ${duration} 分钟`" />
      </van-cell-group>
      <van-button type="primary" block @click="submitOrder" :loading="isSubmitting" color="var(--gradient-primary)">
        提交订单
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showDialog } from 'vant';
import { OrderDetailControllerService } from '../../api/services/OrderDetailControllerService'
import { UserControllerService } from '../../api/services/UserControllerService'
const route = useRoute();
const router = useRouter();
const startLocation = ref(route.query.startPoint);
const endLocation = ref(route.query.endPoint);
const fee = ref(0);
const distance = ref(0);
const duration = ref(0);
const isSubmitting = ref(false);
const userId = ref(0);
const driverId = ref(0);
onMounted(async () => {
  try {
    const token = localStorage.getItem('token');
    if (token) {
      const res = await UserControllerService.getIdByToken(token);
      userId.value = res.data;
    } else {
      console.error('未获取到有效的 token');
    }
  } catch (error) {
    console.error('获取用户 ID 失败:', error);
  }
});

const setNewOrder = async () => {
  try {
    const order = {
      userId: userId.value,
      startLocation: startLocation.value,
      endLocation: endLocation.value,
      vehicleType: value1.value,
      fee: fee.value,
      duration: duration.value,
      distance: distance.value,
      driverId: driverId.value
    };
    const res = await OrderDetailControllerService.addOrder(order);
    console.log(res);
    if (res.code === 0) {
      showDialog({
        title: '订单提交成功',
        message: '订单提交成功，即将返回首页',
      }).then(() => {
        router.push('/');
      });
    }
  } catch (error) {
    console.error('创建订单失败:', error);
  } finally {
    isSubmitting.value = false;
  }

}

const value1 = ref(0);
const option1 = [
  { text: '快车', value: 0 },
  { text: '商务车', value: 1 },
  { text: '豪华车', value: 2 },
];

onMounted(() => {
  fee.value = Math.floor(Math.random() * 21) + 20;
  distance.value = Math.floor(Math.random() * 21) + 20;
  duration.value = Math.floor(Math.random() * 21) + 20;
  driverId.value = Math.floor(Math.random() * 10) + 2;
});

const submitOrder = async () => {
  isSubmitting.value = true;
  try {
    setNewOrder()
  } catch (error) {
    console.log(error);
  }
};
</script>

<style lang="scss" scoped>
.new-order-page {
  padding: 20px;
}

.order-info {
  margin-top: 20px;
}

.vehicle-type-container {
  display: flex;
  align-items: center;
}

.vehicle-type-container .van-cell {
  flex-shrink: 0;
  margin-right: 10px;
}

/* 自定义下拉菜单样式 */
.custom-dropdown-menu {
  margin: 0;
  /* 去除默认边距 */
}

.custom-dropdown-item {
  background-color: transparent;

  /* 统一背景色 */
  .van-dropdown-item__title {
    padding: 0;
    /* 去除标题内边距 */
  }
}
</style>